<template>  
  <div>
    <h1>{{person}}</h1>
    <h1>姓名: {{name}}</h1>
    <h1>年龄: {{age}}</h1>
    <h1>岗位: {{job.type}}</h1>
    <h1>薪资: {{job.salary}}K</h1>
    <button @click="name += '@'">点我修改姓名</button>
    <button @click="age ++">点我年龄+1</button>
    <button @click="job.salary ++">点我涨薪</button>
  </div>
</template>

<script>  
import {reactive, toRefs} from 'vue' 
export default {
  name: 'Demo',  
  setup() {  
    let person = reactive({
      name: '张三',
      age: 18,
      job: {
        type: '前端工程师',
        salary: 20
      }
    })
    return {person, ...toRefs(person)} 
  }
}
</script>

